<template>
  <div class="wrapper">
    <!-- header部分 -->
    <header>
      <p class="back" @click="toBusinessInfo(businessId)">
        <i class="fa fa-angle-left"></i>
      </p>
      <p class="font">确认订单</p>
    </header>
    <!-- 订单信息部分 -->
    <div class="background">
      <div class="order-info">
        <h5>订单配送至:</h5>
        <div class="order-info-address" @click="toUserAddress">
          <p>{{ deliveryaddress != null ? deliveryaddress.address : '请选择送货地址' }}</p>
          <i class="fa fa-angle-right"></i>
        </div>
        <p>{{ deliveryaddress != null ? deliveryaddress.contactName : user.userName }}
          {{ deliveryaddress != null ? deliveryaddress.contactSex : user.userSex | sexFilter }}
          {{ deliveryaddress != null ? deliveryaddress.contactTel : user.userId }}</p>
      </div>
    </div>
    <h3>{{ business.businessName }}</h3>
    <!-- 订单明细部分 -->
    <ul class="order-detail">
      <li v-for="item in cartArr" :key="item.foodId">
        <div class="order-detail-left">
          <img :src="item.food.foodImg">
          <p>{{ item.food.foodName }} x {{ item.quantity }}</p>
        </div>
        <p>￥{{ parseFloat(item.food.foodPrice * item.quantity).toFixed(1) }}</p>
      </li>
    </ul>
    <div class="order-deliveryfee">
      <p>配送费</p>
      <p>￥{{ business.deliveryPrice }}</p>
    </div>
    <div class="order-deliveryfee">
      <p>饿了么红包</p>
      <p v-show="this.flag === 204">暂无可用 ></p>
      <button v-show="this.flag === 200 && empty === 0 && this.couponList === 0" class="use" @click="toMycoupons">去使用
        ></button>
      <p class="discount" @click="toMycoupons" style="color: orangered;"
        v-show="this.flag === 200 && empty === 1 && this.couponList !== 0">
        -￥{{ this.List[this.id].values || 0 }}
      </p>
    </div>
    <!-- 合计部分 -->
    <div class="total">
      <div class="total-left">
        ￥{{ totalPrice }}
      </div>
      <div class="total-right" @click="toPayment">
        去支付
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Orders',
  data() {
    return {
      empty: this.$getSessionStorage("empty"),
      total: this.$route.query.total,
      businessId: this.$route.query.businessId,
      business: {},
      user: {},
      cartArr: [],
      deliveryaddress: {},
      flag: 0,
      id: JSON.parse(localStorage.getItem('selected')).typeId - 1 > 0 ? JSON.parse(localStorage.getItem('selected')).typeId - 1 : 1,
      List: JSON.parse(localStorage.getItem('List')),
      couponList: JSON.parse(localStorage.getItem('couponList')),
      passId: JSON.parse(localStorage.getItem('selected')).typeId
    }
  },
  created() {
    this.user = this.$getSessionStorage('user');
    this.deliveryaddress = this.$getLocalStorage(this.user.userId);
    //查询当前商家
    this.$axios.get(`business/${this.businessId}`, {
      params: {
        token: this.$getSessionStorage("token")
      }
    }).then(response => {
      this.business = response.data;
    }).catch(error => {
      console.error(error);
    });

    //查询当前用户在购物车中的当前商家食品列表
    this.$axios.get(`carts/getCart/${this.user.userId}/${this.businessId}`, {
      params: {
        token: this.$getSessionStorage('token'),
      }
    }).then(response => {
      console.log(response.data);
      this.cartArr = response.data;
    }).catch(error => {
      console.error(error);
    });

    // 查询当前用户的可用优惠券
    this.$axios.get('userCoupons/coupons', {
      params: {
        userId: this.user.userId,
        orderTotal: this.total,
        token: this.$getSessionStorage('token'),
      }
    }
    ).then(response => {
      console.log(response);
      this.flag = response.status
    }).catch(error => {
      console.error(error);
    });
  },
  computed: {
    totalPrice() {
      let totalPrice = 0;
      for (let cartItem of this.cartArr) {
        totalPrice += cartItem.food.foodPrice * cartItem.quantity;
        totalPrice = parseFloat(totalPrice.toFixed(1));
      }
      totalPrice += this.business.deliveryPrice;
      totalPrice = parseFloat(totalPrice.toFixed(1));
      if (this.couponList !== 0) {
        console.log('进来了');
        // console.log('进来了', this.List[this.coupon.typedId - 1].values);
        // let couponList = JSON.parse(localStorage.getItem('couponList
        totalPrice -= this.List[this.id].values
        totalPrice = parseFloat(totalPrice.toFixed(1));
      }
      return totalPrice;
    }
  },
  filters: {
    sexFilter(value) {
      return value == 1 ? '先生' : '女士';
    }
  },
  methods: {
    toUserAddress() {
      this.$router.push({
        path: '/userAddress', query: {
          businessId: this.businessId,
          total: this.total
        }
      });
    },
    toMycoupons() {
      this.$router.push({ path: '/mycoupons', query: { total: this.total } })
    },
    toBusinessInfo(businessId) {
      this.$setSessionStorage("empty", 0)
      localStorage.setItem('couponList', 0)
      this.$router.push({
        path: '/businessInfo',
        query: {
          businessId: businessId,
        }
      });
    },
    toPayment() {
      if (this.deliveryaddress == null) {
        alert('请选择送货地址！');
        return;
      }
      console.log("进来了");
      // 创建订单
      const orders = {
        userId: this.user.userId,
        businessId: this.businessId,
        daId: this.deliveryaddress.daId,
        orderTotal: this.totalPrice,
        typeId: JSON.parse(localStorage.getItem('selected')).typeId
      }
      this.$axios.post('orders', orders, {
        params: {
          token: this.$getSessionStorage("token"),
        }
      }).then(response => {
        console.log(response);
        let orderId = response.data;
        if (orderId > 0) {
          this.$router.push({
            path: '/payment',
            query: { orderId: orderId }
          });
        } else {
          alert('创建订单失败！');
        }
        let obj = JSON.parse(localStorage.getItem('selected'));
        obj.typeId = 0;
        localStorage.setItem('selected', JSON.stringify(obj));


        localStorage.setItem('couponList', 0)
      }).catch(error => {
        console.error(error);
      });

    }
  }
}
</script>
<style scoped>
/*********** 总容器 ***********/
.wrapper {
  width: 100%;
  height: 100%;
}

/*********** header部分 ***********/
.wrapper header {
  width: 100%;
  height: 12vw;
  background-color: #0097ff;
  color: #fff;
  font-size: 4.8vw;

  position: fixed;
  left: 0;
  top: 0;
  /* 提高层次 */
  z-index: 1000;

  display: flex;
  /* justify-content: space-around; */
  align-items: center;
}

.wrapper header .back {
  margin: 0 2vw 0 3vw;
  font-size: 6vw;
  font-weight: 700;
  user-select: none;
  cursor: pointer;
}

.wrapper header .font {
  font-weight: 545;
}

/*********** 订单信息部分 ***********/
.wrapper .background {
  width: 100%;
  margin-top: 12vw;
  background-color: #0097ff;
  box-sizing: border-box;
  padding: 3vw 2vw 4vw 2vw;
  color: #000;
}

.wrapper .background .order-info {
  background-color: #fff;
  padding: 2vw 5vw;
  border-radius: 15px;
}

.wrapper .background .order-info h5 {
  font-size: 3vw;
  font-weight: 400;
}

.wrapper .background .order-info .order-info-address {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;

  font-weight: 700;
  user-select: none;
  cursor: pointer;
  margin: 1vw 0;
}

.wrapper .background .order-info .order-info-address p {
  width: 90%;
  font-size: 5vw;
}

.wrapper .background .order-info .order-info-address i {
  font-size: 6vw;
}

.wrapper .background .order-info p {
  font-size: 3vw;
}

.wrapper h3 {
  box-sizing: border-box;
  padding: 3vw;
  font-size: 4vw;
  color: #666;
  border-bottom: solid 1px #ddd;
}

/*********** 订单明细部分 ***********/
.wrapper .order-detail {
  width: 100%;
}

.wrapper .order-detail li {
  width: 100%;
  height: 16vw;
  box-sizing: border-box;
  padding: 3vw;
  color: #666;

  display: flex;
  justify-content: space-between;
  align-items: center;
}

.wrapper .order-detail li .order-detail-left {
  display: flex;
  align-items: center;
}

.wrapper .order-detail li .order-detail-left img {
  width: 10vw;
  height: 10vw;
}

.wrapper .order-detail li .order-detail-left p {
  font-size: 3.5vw;
  margin-left: 3vw;
}

.wrapper .order-detail li p {
  font-size: 3.5vw;
}

.wrapper .order-deliveryfee {
  width: 100%;
  height: 10vw;
  box-sizing: border-box;
  padding: 9vw 3vw 0 3vw;
  color: #666;
  font-size: 3.5vw;

  display: flex;
  justify-content: space-between;
  align-items: center;
}

.wrapper .order-deliveryfee .use {
  color: #fff;
  background-color: #ff743c;
  border-radius: 10px;
  border: none;
  padding: 0.6vw 1.8vw;
}

/*********** 合计部分 ***********/
.wrapper .total {
  width: 100%;
  height: 14vw;

  position: fixed;
  left: 0;
  bottom: 0;

  display: flex;
  justify-content: space-around;
}


.wrapper .total .total-left {
  flex: 2;
  background-color: #505051;

  color: #fff;
  font-size: 4.5vw;
  font-weight: 700;
  user-select: none;

  display: flex;
  justify-content: center;
  align-items: center;
}

.wrapper .total .total-right {
  flex: 1;
  background-color: #38ca73;

  color: #fff;
  font-size: 4.5vw;
  font-weight: 700;
  cursor: pointer;

  display: flex;
  justify-content: center;
  align-items: center;
}
</style>